<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.带参数默认值的函数
        // es5的写法
        /* function add(a, b) {
            a = a || 10;
            b = b || 20;
            return a + b;
        }
        console.log(add()); */

        // function add(a, b = 20) {
        //     return a + b;
        // }
        // console.log(add(30));

        // 2.默认的表达式也可以是一个函数
        // function add(a, b = getVal(5)) {
        //     return a + b;
        // }

        // function getVal(val) {
        //     return val + 5;
        // }
        // console.log(add(10));

        // es5写法
        /*  function pick(obj) {
             let result = Object.create(null);
             for(let i = 1;i < arguments.length;i++){
                 result[arguments[i]] = obj[arguments[i]]
             }
             return result;
         }
         let book = {
             title:'es6的教程',
             author:'小马哥',
             year:2019
         }
         let bookData = pick(book,'title','year','author');
         console.log(bookData); */

        // 3.剩余参数：由三个点...和一个紧跟着的具名参数指定 ...keys

        // function pick(obj, ...keys) {
        //     // ...keys 解决了arguments 的问题
        //     let result = Object.create(null);
        //     for (let i = 0; i < keys.length; i++) {
        //         result[keys[i]] = obj[keys[i]];
        //     }
        //     return result;
        // }

        // let book = {
        //     title: 'es6的教程',
        //     author: '小马哥',
        //     year: 2019
        // }
        // let bookData = pick(book, 'year', 'author');
        // console.log(bookData);

        // function checkArgs(...args) {
        //     console.log(args);
        //     console.log(arguments);
        // }
        // checkArgs('a', 'b', 'c');

        // 4.扩展运算符...
        // 剩余运算符：把多个独立的合并到一个数组中
        // 扩展运算法：将一个数组分割，并将各个项作为分离的参数传给函数
        // const maxNum = Math.max(20,30);
        // console.log(maxNum);

        // 处理数组中的最大值，使用apply
        // const arr = [10, 20, 50, 30, 90, 100, 40];
        // console.log(Math.max.apply(null,arr));

        // es6 扩展运算法更方便
        // console.log(Math.max(...arr));


        //******** es6的箭头函数 ********
        // 使用=>来定义  function(){}等于与 ()=>{}

        /* let add = function (a, b) {
            return a + b;
        } */

        // let add = (a, b) => {
        //     return a + b;
        // }
        // let add = (val1, val2) => val1 + val2;
        // console.log(add(10, 20));

        // let fn = ()=> 'hello world' + 123;
        // console.log(fn());
        /* let getObj = id => {
            return {
                id: id,
                name:'小马哥'
            }
        } */
        // let getObj = id => ({id:id,name:"小马哥"});
        // let obj = getObj(1);
        // console.log(obj);

        /* let fn = (function() {
            return function() {
                console.log('hello es6');
            }
        })(); */

        /*  let fn = (() => {
             return () => {
                 console.log('hello es6 2');
             }
         })();
         fn(); */

        // 没有this绑定
        // es5中this指向：取决于调用该函数的上下文对象
        /* let PageHandle = {
            id: 123,
            init: function () {
                document.addEventListener('click',function(event) {
                    // this.doSomeThings is not a function
                    // console.log(this);
                    this.doSomeThings(event.type);
                })
            },
            doSomeThings:function(type){
                console.log(`事件类型:${type},当前id:${this.id}`);
                
            }
        }
        PageHandle.init(); */

        let PageHandle = {
            id: 123,
            init: function () {
                // 箭头函数没有this指向，箭头函数内部this值只能通过查找作用域链来确定,一旦使用箭头函数，当前就不存在作用域链
                document.addEventListener('click', (event) => {
                    // this.doSomeThings is not a function
                    console.log(this);
                    this.doSomeThings(event.type);
                }, false)
            },
            doSomeThings: function (type) {
                console.log(`事件类型:${type},当前id:${this.id}`);

            }
        }
        PageHandle.init();

        // 使用箭头函数的注意事项1:使用箭头函数 函数内部没有arguments
        // let getVal = (a, b) => {
        //     console.log(arguments);
        //     return a + b;
        // }
        // console.log(getVal(1, 3));

        // 2.箭头函数不能使用new关键字来实例化对象
        let Person = ()=>{
            
        };
        // function函数 也是一个对象，但是箭头函数不是一个对象，它其实就是一个语法糖
        // console.log(Person);
        
        let p = new Person();
        
    </script>
</body>

</html>